<template>
	<ui-textbox 
		class="bi-sms-code" 
		:class="{'is-allow-send': activeSend, 'is-wating': wating}" 
		:size="size" 
		:placeholder="placeholder" 
		v-model="inputValue"
	>
		<ui-icon name="code-line" size="20px" color="#999" slot="prefix"></ui-icon>
		<span class="bi-sms-code__control" slot="suffix">
			<span class="bi-sms-code__sending" v-if="sending"><ui-icon name="loading"></ui-icon> 发送中</span>
			<span class="bi-sms-code__countdown" v-else-if="wating">重新发送{{countDown}}s</span>
			<span class="bi-sms-code__send" v-else @click="handleSendCode">获取验证码</span>
		</span>
	</ui-textbox>
</template>
<script>
export default {
  name: 'BiSendSmsCode',
  props: {
    size: {
      type: String
    },
    placeholder: {
      type: String
    },
    mobile: {
      type: String
    },
    value: {
      type: [String, Number]
    }
  },
  data () {
    return {
      countDown: 0,
      wating: false,
      sending: false
    }
  },
  computed: {
    inputValue: {
      get () {
        if (typeof this.value === 'string') {
          return this.value.trim()
        }
        return this.value
      },
      set (val) {
        this.$emit('input', val)
      }
    },
    mobileNumber () {
      if (typeof this.mobile === 'string') {
        return this.mobile.trim()
      }
      return this.mobile
    },
    activeSend () {
      if (!this.mobileNumber) {
        return false
      }
      return String(this.mobileNumber).length === 11
    }
  },
  methods: {
    handleSendCode () {
	  this.$emit('send', {
		setSendMethod: (fn) => {
			if (typeof fn !== 'function') {
				return
			} 
			const rs = fn()
			if (rs && rs.then) {
				this.sending = true
				rs.then(() => {
					this.sending = false
					this.intoWating()
				}, () => {
					this.sending = false
				})
			}
		}
	  })
    },
    intoWating () {
      this.wating = true
      this.countDown = 59
      this._timer = setInterval(() => {
        this.countDown = this.countDown - 1
        if (this.countDown <= 0) {
          clearInterval(this._timer)
          this.wating = false
        }
      }, 1000)
    }
  },
  beforeDestroy () {
    clearInterval(this._timer)
  }
}
</script>
<style lang="less">
.bi-sms-code{
  &.ui-textbox{
    .ui-textbox__input{
      .el-input__inner{
        padding-right: 110px;
        transition: padding-right .3s;
      }
    }
  }
  &.is-wating{
    .ui-textbox__input{
      .el-input__inner{
        padding-right: 76px;
      }
    }
    .bi-sms-code__control{
      width: auto;
    }
  }
  &.is-allow-send{
    .bi-sms-code__send{
      color: #3385FF;
      cursor: pointer;
    }
  }
}
.bi-sms-code__send{
  color: #bfbfbf;
  cursor: not-allowed;
}
.bi-sms-code__sending{
  color: #bfbfbf;
  cursor: not-allowed;
}
.bi-sms-code__control{
  display: flex;
  height: 100%;
  flex-direction: column;
  justify-content: center;
  padding: 0 15px;
  text-align: center;
  position: relative;
  transition: width .3s;
  overflow: hidden;
  white-space: nowrap;
  &:after{
    content: '';
    position: absolute;
    height: 50%;
    top: 50%;
    left: 0;
    width: 1px;
    background-color: #e5e5e5;
    transform: translateY(-50%);
  }
}
</style>
